<template>
  <div class="page">
    <div class="card-box">
      <div class="card-item">
        <div class="card-header">
          <div class="item-head">
            <div class="title">{{ type === 'edit' ? '编辑' : '新增' }}审查项</div>
            <div v-show="type === 'edit'" class="text-add" @click="handleDelete">删除</div>
          </div>
        </div>
        <van-divider />
        <div class="card-body card-body-nop">
          <van-form ref="dataFormRef">
            <van-cell-group inset>
              <custom-select
                :selectId="dataForm.itemId"
                :columns="reviewOptions"
                :option="{ label: 'name', value: 'id' }"
                :rules="dataRule.itemId"
                required
                label="审查项"
                placeholder="请选择审查项"
                @getValue="getValue"
              ></custom-select>
              <van-field v-model="dataForm.reviewResult" label="审查结果" placeholder="审查结果" required :rules="dataRule.reviewResult" />
            </van-cell-group>
          </van-form>
        </div>
      </div>
    </div>

    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="handleBack">取消</van-button>
      <van-button :loading="isCommit" type="button" class="cus-btn btn-primary" @click="handleSave">提交</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, ref, toRefs, computed, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
import { Dialog, Toast } from 'vant'
import { reviewItemsDetail, deleteReviewItems, saveReviewItems, updateReviewItems } from '@/service/govern'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const dataFormRef = ref(null)
    const state = reactive({
      itemId: '',
      type: 'add',
      reviewItems: [],
      pageId: '',
      pagePath: '',
      isCommit: false,
      dataForm: {
        id: '',
        applyBaseId: '',
        itemId: null,
        reviewResult: '',
        reviewModule: ''
      },
      dataRule: {
        itemId: [{ required: true, message: '请选择审查项', trigger: 'onChange' }],
        reviewResult: [{ required: true, message: '请输入审查结果', trigger: 'onBlur' }],
      },
    })

    // 获取字典数据
    store.dispatch('getReviewOptions', route.query.deptCode)
    // 全局属性
    const { listAssign } = getCurrentInstance().appContext.config.globalProperties

    onMounted(() => {
      init()
    })

    const init = async () => {
      const { id, type, pageId, pagePath, applyBaseId, reviewModule } = route.query
      state.type = type
      state.pageId = pageId
      state.pagePath = pagePath
      state.dataForm.applyBaseId = applyBaseId ? applyBaseId : pageId
      state.dataForm.reviewModule = reviewModule || ''
      if (id) {
        reviewItemsDetail(id).then((res) => {
          res.body.obj.itemId = Number(res.body.obj.itemId)
          listAssign(state.dataForm, res.body.obj)
        })
      }
    }
    const goRoute = () => {
      state.isCommit = false
      router.push({ path: `${state.pagePath}/${state.pageId}` })
    }
    const handleDelete = () => {
      Dialog.confirm({
        title: '标题',
        message: '确认删除该审查项吗?',
      }).then(() => {
        state.isCommit = true
        deleteReviewItems(state.dataForm.id)
          .then(() => {
            Toast.success('删除成功')
            goRoute()
          })
          .catch(() => {
            state.isCommit = false
          })
      })
    }
    // 获取id
    const getValue = (val) => {
      state.dataForm.itemId = val
    }
    const handleBack = () => {
      router.push({ path: `${state.pagePath}/${state.pageId}` })
    }
    // 保存
    const handleSave = () => {
      dataFormRef.value.validate().then(() => {
        state.isCommit = true
        if (state.type === 'add') {
          saveReviewItems(state.dataForm)
            .then(() => {
              Toast.success('新增成功')
              goRoute()
            })
            .catch(() => {
              state.isCommit = false
            })
        } else {
          updateReviewItems(state.dataForm)
            .then(() => {
              Toast.success('保存成功')
              goRoute()
            })
            .catch(() => {
              state.isCommit = false
            })
        }
      })
    }

    const reviewOptions = computed(() => {
      return store.state.reviewOptions
    })
    return {
      dataFormRef,
      reviewOptions,
      ...toRefs(state),
      handleDelete,
      handleBack,
      handleSave,
      goRoute,
      getValue,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  padding-top: 20px;
  .card-box {
    .van-divider {
      margin: 10px 0 0;
    }
    .card-header {
      font-size: 15px;
      .item-head {
        .fj();
        .text-add {
          font-weight: 400;
          color: #3487f6;
        }
        .text-desc {
          font-size: 13px;
          font-weight: 400;
          color: #9297ae;
        }
      }
    }
    .card-body {
      padding-bottom: 10px;
    }
    .last-item {
      margin-bottom: 0;
    }
  }
  .btn-group {
    padding: 30px 0 20px;
    .cus-btn {
      width: 167px;
    }
  }
}
</style>